<template>
  <div class="nav">
    <ul class="icon">
      <li>
        <a title="首页" @click="goRoute('home')">
          <img src="../assets/image/icon01.png" alt />
        </a>
      </li>
      <li>
        <a title="名医风采" @click="goRoute('famousdoctor')">
          <img src="../assets/image/icon02.png" alt />
        </a>
      </li>
      <li>
        <a title="工作室介绍" @click="goRoute('studioIntro')">
          <img src="../assets/image/icon03.png" alt />
        </a>
      </li>
      <li>
        <a title="论文著作" @click="goRoute('thesis')">
          <img src="../assets/image/icon04.png" alt />
        </a>
      </li>
      <li>
        <a title="临床医案" @click="goRoute('medicalrecord')">
          <img src="../assets/image/icon05.png" alt />
        </a>
      </li>
      <li>
        <a title="视频资料" @click="goRoute('videoMaterial')">
          <img src="../assets/image/icon06.png" alt />
        </a>
      </li>
      <li>
        <a title="传承之路" @click="goRoute('heritageroad')">
          <img src="../assets/image/icon07.png" alt />
        </a>
      </li>
      <li>
        <a title="名医工作站" @click="goRoute('medicalwork')">
          <img src="../assets/image/icon08.png" alt />
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 路由跳转
    goRoute(name) {
      this.$router.push({
        path: "/" + name,
        // query: {
        //   id: null
        // },
      });
    },
  },
};
</script>

<style lang="less">
@media screen and (max-width: 1200px) {
  .nav {
    padding: 10px !important;
  }
}
.nav {
  width: 100%;
  padding: 10px 25%;
  box-sizing: border-box;
  margin: 0 auto;
  background: url("../assets/image/navbg.jpg");
  .icon {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    li {
      margin-right: 6px;
      cursor: pointer;
      a img {
        width: 100%;
        height: auto;
        background-size: cover;
        vertical-align: middle;
      }
    }
  }
}
</style>